<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <th:block th:include="include::header('书架列表')"/>
</head>
<body class="gray-bg">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">

                </form>
            </div>
                    <div class="col-sm-12 search-collapse">
                        <div class="btn-group-sm">
                            <a class="btn btn-primary" th:href="@{/shelf/add}"><i class="fa fa-plus"></i>添加</a>
                        </div>

                        <table class="table table-hover">
                            <tr>
                                <th>ISBN</th>
                                <th>架层</th>
                                <th>详细位置</th>
                                <th>操作</th>
                            </tr>
                            <tbody class="tbody">
                                <tr th:each="shelf:${shelfs.getList()}">
                                    <td th:text="${shelf.ISBN}"></td>
                                    <td th:text="${shelf.shelf}"></td>
                                    <td th:text="${shelf.bookPosition}"></td>
                                    <td>
                                        <a class="btn btn-danger" th:href="@{/shelf/update/{id}(id=${shelf.id})}">修改</a>
                                        <a class="btn btn-danger" th:href="@{/shelf/delete/{id}(id=${shelf.id})}">删除</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="text-right">
                            <p>当前第<span th:text="${shelfs.getPageNum()}"></span>页
                            ，总<span th:text="${shelfs.pages}"></span>页,
                              共<span th:text="${shelfs.total}"></span>条记录
                                <a th:href="@{/system/shelf(pageNum=1,pageSize=5)}">首页</a>
                                <a th:href="@{/system/shelf(pageNum=${shelfs.getPrePage()} ? ${shelfs.getPageNum()}-1 : 1)}">上一页</a>
                                <a th:href="@{/system/shelf(pageNum=${shelfs.getNextPage()} ? ${shelfs.getPageNum()} +1 : ${shelfs.total})}">下一页</a>
                                <a th:href="@{/system/shelf(pageNum=${shelfs.pages})}">尾页</a>
                            </p>
                        </div>
                    </div>
        </div>

    </div>
    <th:block th:include="include::footer"/>
<script>

    let prefix="/shelf/search"
    function searchss(){
        let params={
            'isbn' : $("#ISBN").val(),
            'shelf': $("#shelf").val(),
        }
        $.ajax({
            type:"POST",
            url:prefix,
            data:JSON.stringify(params),
            contentType:'application/json',//要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
            dataType:'json',//要求为String类型的参数，预期服务器返回的数据类型
            success : function (ret){
                let notice_html=getTableHtml(ret.data);
                $(".tbody").empty();
                $(".tbody").html(notice_html);
            }
        })
    }
    function getTableHtml(shelf){
        let rows=''
        for (let i=0;i<shelf.length;i++){
            let ros=`<tr
                <td></td>
                <td>${shelf[i].isbn}</td>
                <td>${shelf[i].shelf}</td>
                <td>${shelf[i].bookPosition}</td>
                <td>
                   <a class="btn btn-danger" href="@{/shelf/update/${shelf[i].id}}">修改</a>
                   <a class="btn btn-danger" href="@{/shelf/delete/${shelf[i].id}}">删除</a>
                 </td>
            </tr>
            `
            rows+=ros;
        }
        return rows;
    }
</script>
</body>
</html>